<!-- 配置页面路径  -->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>添加</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="${request.contextPath}${staticPath}/admin/plugins/bootstrap/css/bootstrap.min.css">  
        <!-- <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/admin/plugins/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css">
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
    <script src="${request.contextPath}${staticPath}/admin/plugins/jquery/jquery-3.4.1.min.js"></script>
    	<script src="${request.contextPath}${staticPath}/admin/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
    <script src="${request.contextPath}/admin/plugins/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.min.js"></script>
	

	<style>
            
            .icon1{
            	width:300px !important;
            }
            .span1{
            	right:600px !important];
            }
            .input-group-addon{
            	width:0 !important;
            }
            /* 如果使用远程，请自行调整图标容器宽度*/
            .iconpicker-popover.popover{width:335px;}
        </style>
</head>
<body>
	
<div class="container">
	<h2>添加</h2>      
	<form role="form" action="/admin/menuAdd" method="post">
	  <div class="form-group">
	    <label for="id">编号</label>
	    <input type="text" class="form-control" name="id" id="id" placeholder="请输入编号">
	  </div>
	  <div class="form-group">
	    <label for="name">导航栏标题</label>
	    <input type="text" class="form-control" name="name" id="name" placeholder="请输入导航栏标题">
	  </div>
	  <!-- 图标选择器 -->
	  <div class="form-group">
	    <label for="icon">图片</label>
	    <div class="input-group">
         <input data-placement="bottomRight" class="form-control icp icp-auto icon1" value=""  type="text" name="icon" id="icon" placeholder="请输入图片地址"/>
          <span class="input-group-addon span1"></span>
         </div>  
	  </div>
	  <div class="form-group">
	    <label for="pid">父级id</label>
	    <input type="text" class="form-control" name="pid" id="pid" placeholder="请输入父级id">
	  </div>
	  <div class="form-group">
	    <label for="url">跳转地址</label>
	    <input type="text" class="form-control" name="url" id="url"  placeholder="请输入跳转地址">
	  </div>
	  <div class="form-group">
	    <label for="sort">序号</label>
	    <input type="number" class="form-control" name="sort" id="sort"  placeholder="请输入序号">
	  </div>
	  <div class="form-group">
	    <label for="status">状态</label>
	    <input type="number" class="form-control" name="status" id="status"  placeholder="请输入状态">
	  </div>
	  
	  <button type="submit" class="btn btn-default">提交</button>
	</form> 
</div>

	<script>
        $(function () {
            // 图标可以点击选中 icp-auto 操作图标元素
            $('.icp-auto').iconpicker({
                title: '请选择一个图标',
                //  指定图标
                //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
                // 添加其他图标 加入 bootstrap  glyphicon 字体图标
                icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
                    'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
                    fullClassFormatter: function (val) {
                    if (val.match(/^fa-/)) {
                        return 'fa ' + val;
                    } else {
                        return 'glyphicon ' + val;
                    }
                },
                component: '.input-group-addon', // 图标存放容器
                /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
                placement: 'bottomRightCorner',  // 图标容器位置
            });

            // 图标不可以点击, 绑定 .icp 元素
            // $.iconpicker.batch('.icp', 'destroy');

            // 点击下拉按钮显示图标
            $('.btn-group>button').one("click", function () {
                console.log(1);
                $('.icp-dd').iconpicker({
                    //title: 'Dropdown with picker',
                    //component:'.btn > i'
                });
            });
        });
    </script>
</body>
</html>